<template>
    <div class="dialogPop" >
      <el-dialog :visible.sync="addTeaClass.dialogAddTea" :before-close="handleClose" size="tiny" title="添加任教班级" >
        <el-form :model="addTeaPop" :rules="rulesAddTeaPop" ref="addTeaPop" label-width="96px">     
          <el-row :gutter="41">
            <el-col :span="23">
              <el-form-item label="科目" prop="subjectId">
                 <el-select v-model="addTeaPop.subjectId" placeholder="选择科目" style="width:100%" 
                               @change="changeSubject($event)" v-autoResize>
                        <el-option v-for="(item,index1) in subjectArr" :key="index1" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>  
          <el-row :gutter="41" v-if="addTeaClass.schoolType=='0'">
            <el-col :span="23">
              <el-form-item label="年级" prop="grade">
                 <el-select v-model="addTeaPop.grade" placeholder="选择年级" style="width:100%" 
                                 @change="changeGrade($event)" v-autoResize>
                        <el-option v-for="(item,index1) in gradeArr" :key="index1" :label="item.sName" :value="item.pId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="41">
            <el-col :span="23">
              <el-form-item label="班级名称" prop="class">
                 <el-select v-model="addTeaPop.class" placeholder="选择班级名称" style="width:100%"  v-autoResize>
                        <el-option v-for="(item,index1) in classArr" :key="index1" :label="item.className" :value="item.classId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="resetFormdelDialogAddTea('addTeaPop')">取 消</el-button>
            <el-button type="primary" @click="addTeacher('addTeaPop')" :loading="loadingBtn">确 认</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import { insertTeacherClass, getGrade, listClassBySchool, getClass} from 'api/teacherManage';
import { listSubjectBySchoolId } from 'api/schoolManage';
import school from 'components/SchoolClasss/school';
import { mapGetters } from 'vuex';
export default {
    components: {school},
    props: {
        addTeaClass: {
            default() {
                return {
                    dialogAddTea: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
       
        return {
      // 添加学校弹框
            loadingBtn: false,
            schoolLoading: false, // 模糊查找学校加载提示
            formInline: {
                schoolId: '',
                schoolNameList: [] // 学校名称列表
            },
            addTeaPop: {
                subjectName: '', // 科目
                subjectId: '', // 科目id
                schoolName: '', // 学校
                grade: '', // 年级
                class: '' // 班级
            },
            rulesAddTeaPop: {
                subjectId: [{ required: true, message: '请输入科目', trigger: 'blur,change' }],
                grade: [{ required: true, message: '请输入年级', trigger: 'blur,change' }],
                class: [{ required: true, message: '请输入班级名称', trigger: 'blur,change' }]
            },
            subjectArr: [], // 科目数组
            gradeArr: [], // 年纪
            classArr: []// 班级
        }
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName'
        ])
    },
    created() {
        this.getGradeClass()
        this.listSubjectBySchoolId();
    },
 
    methods: {
        // 获取学科
        listSubjectBySchoolId() {
            listSubjectBySchoolId(this.schoolId).then(res => {
                this.subjectArr=res.data.content;
                this.subjectArr.unshift({id: '', name: '请选择'})
            })
        },
        // 选择科目
        changeSubject() {
            // this.addTeaPop.grade='';
            let obj=this.subjectArr.find((item) => {
                return item.id == this.addTeaPop.subjectId
            })
            this.addTeaPop.subjectName=obj.name;
        },
        getGradeClass() {
            if (this.addTeaClass.schoolType=='0') {// 普通学校 有年级
                this.getGradeClassList(this.schoolId);
            } else if (this.addTeaClass.schoolType=='1') {// 培训机构 没有年级
                let gradeId='';// // 培训机构 就传空
                this.getClassList(gradeId, this.schoolId);
            }
        },
          // 获得年级列表 普通学校
        getGradeClassList(schoolId) {
            getGrade(schoolId).then(res => {
                this.gradeArr=res.data.content;
                this.gradeArr.unshift({pId: '', sName: '请选择'})
            });
        },
         // 只添加班级列表// 培训机构
        getClassList(gradeId) {
            getClass(gradeId, this.schoolId).then(res => {
                if (res.data.content) {// 有返回的班级编号数组
                    this.classArr = res.data.content;
                    this.classArr.unshift({className: '请选择', classId: ''});
                } 
              
            });
        },
       // 年级改变时 普通学校
        changeGrade(grade) {
            this.addTeaPop.class=''
            this.classArr =[];
            if (grade) {
                let schoolId=this.schoolId;
                getClass(grade, schoolId).then(res => {
                    if (res.data.content) {// 有返回的班级编号数组
                        this.classArr = res.data.content;
                        this.classArr.unshift({className: '请选择', classId: ''});
                    } else {
                        this.addTeaPop.class=''
                    }
                });
            } else {
                this.addTeaPop.class=''
                this.classArr =[];
            }
        },
         // 培训机构，直接由年级查找---班级
        listClassBySchool(schoolId) {
            listClassBySchool(schoolId).then(res => {
                if (res.data.content) {// 有返回的班级编号数组
                    this.classArr = res.data.content;
                    this.classArr.unshift({className: '请选择', classId: ''});
                } else {
                    this.addTeaPop.class=''
                }
            });
        },
    // 添加教师信息 确定按钮
        addTeacher(addTeaPop) {
            this.$refs[addTeaPop].validate((valid) => {
                if (valid) {// 验证通过       重复的验证 改成后台添加了
                    // let classIdArr=[];// 里面含有重复的班级id
                    // this.addTeaClass.addLenList.forEach((val, index) => {
                    //     classIdArr.push(val.classId);
                    // });
                    // if (classIdArr.some(item => item == this.addTeaPop.class)) {
                    //     this.$message.info('不可添加重复的任教班级！');
                    //     return false
                    // }
                  
                    this.loadingBtn=true;
                    let data={
                        teacherId: this.addTeaClass.teacherId,
                        schoolId: this.schoolId,
                        subjectId: this.addTeaPop.subjectId,
                        subject: this.addTeaPop.subjectName,
                        classId: this.addTeaPop.class
                    }
                    insertTeacherClass(data).then(res => {
                        this.loadingBtn=false;
                        this.$emit('search-list', data.teacherId);// 更新列表
                        this.handleClose();
                        this.$message.success('添加任教班级成功！');
                    }).catch(() => {
                        this.loadingBtn=false;
                    })
                   
                } else {
                    return false;
                }
            });
        },
    // 添加教师弹出框的关闭按钮
        handleClose() {
            this.$refs.addTeaPop.resetFields();
            this.delDialogAddTea();
        },
    // 取消按钮 
        resetFormdelDialogAddTea(dataForm) {
            this.$refs[dataForm].resetFields();
            this.delDialogAddTea();
        },
    // 还原清空弹窗信息
        delDialogAddTea() {
            this.addTeaClass.dialogAddTea = false;
            this.addTeaPop.schoolName = '';
            this.addTeaPop.subjectId = '';
            this.addTeaPop.subjectName = '';
            this.addTeaPop.grade = '';
            this.addTeaPop.class = '';
        }
    }
}
</script>